﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<#--<link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="../static/css/pagination.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/station.css">
    <link rel="stylesheet" href="../static/css/client.css">
    <link rel="stylesheet" href="../static/css/user.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
<#--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>-->
<#--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ehpGZzL5wORts5X41dL6KI7COkqlzaEC"></script>-->
    <title>容智车联车厢管家</title>

    <style>
        .bot-dot input{border:1px solid #e8e8e8!important;}
        table {
            table-layout: fixed;
            word-break: break-all;
        }
        #pop-bottom {
            background: rgba(51, 51, 51, 0.8);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            z-index: 4;
        }

        .new-count {
            margin:0;
            position: absolute;
            left:0;
            top: 0;
            width: 100%;
            height:100%;
            overflow-y:auto;
            z-index: 53;
            border: 1px solid rgb(204, 204, 204);
        }
        .fix-close {
            top: 10px;
            right: 16px;
            position: absolute;
        }
        .tit-top {
            height:auto;
            background: rgb(0, 163, 68);
            color: rgb(255, 255, 255);
        }
        .width100{width:100px!important;}
        .margin-t10{margin-right:10px!important;}

    </style>
</head>
<body class="odd-body pos-re">
<div class="container-fluid  pos-re">
    <!--右边内容区-->
    <div class="row-fluid bg-white  pad-10 bdbox height100 yaxh">
        <div class="p-b-10 ov-h">
            <form class="navbar-search pull-left" method="post" action="../station/choose">
                <input type="text" class="search-query" placeholder="输入搜索信息" name="word" value="${word}"/>
                <button class="search-lence" type="Submit"></button>
            </form>
            <div class="pull-right offset4">
                <button class="btn bg-color" id="add_info">增加</button>
                <button class="btn bg-color" id="import_btn" data-toggle="modal" data-target="#myModal2">导入表格</button>
                <a class="btn bg-color" data-toggle="modal"  href="../station/exout?word=${word}" download="station.xls">导出</a>
            </div>
        </div>
        <!--以上是搜索框，增加按钮组-->
        <!--以下是内容表格区-->
        <table class="table cl-b table-btn  table-hover">
            <thead class="four-border">
            <tr>
                <th width="10%">序号</th>
                <th width="10%">场站编号</th>
                <th width="12%">场站名称</th>
                <th width="12%">所属客户</th>
                <th width="36%">地理坐标</th>
                <th width="20%">操作</th>
            </tr>
            </thead>
            <tbody id="f-table">
            <#list allStations as stations>
            <tr class="${stations.id}">
                <td class="" width="20%">
                    <span class="txt-limit1" title="${stations.id!""}">${stations_index+1+((currentPage-1)*size)}</span>
                </td>
                <td class="port-num" width="20%" id="nums">
                    <span class="txt-limit1" title="${stations.stationCode!""}">${stations.stationCode!""}</span>
                </td>
                <td class="port-name" width="20%">
                    <span class="txt-limit1" title="${stations.name!""}">${stations.name!""}</span>
                </td>
                <td class="port-owner" width="20%">
                    <span class="txt-limit1" title="${stations.clentName!""}">${stations.clentName!""}</span>
                </td>
                <td class="port-coords" width="20%">
					<span class="txt-limit1" title="${stations.area!""}">
                    ${stations.area!""}</span>
                </td>
                <td width="20%">
                    <button class="btn bg-color rewrite update_info">修改</button>
                    <button class="btn bg-color2" data-toggle="modal" data-target="#myModal">删除</button>
                </td>
            </tr>
            </#list>
            </tbody>
        </table>
        <div class="M-box"></div>
        <!-- 分页 -->
        <div class="col-md-12 column">
            <ul class="pagination pull-right">
                <ul class="pagination">
                <#if currentPage lte 1>
                    <li class="disabled"><a href="#">上一页</a></li>
                <#elseif type == "1">
                    <li><a href="../station/getStation?page=${currentPage - 1}&size=${size}">上一页</a></li>
                <#elseif type == "2">
                    <li><a href="../station/choose?page=${currentPage - 1}&size=${size}&word=${word}">上一页</a></li>
                </#if>
                <#if  maxSize gte 10>
                    <#if currentPage gte 6 && currentPage lte maxSize-4>
                        <#list currentPage-5.. currentPage+4 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../station/getStation?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../station/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage lte 6>
                        <#list 1..10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../station/getStation?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../station/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage gte maxSize-4>
                        <#list maxSize-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../station/getStation?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../station/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                    <#elseif currentPage lte maxSize-4>
                        <#list currentPage-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../station/getStation?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../station/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                    <#else >
                        <#list currentPage.. 10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../station/getStation?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../station/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    </#if>
                <#else >
                    <#list 1..maxSize as index>
                        <#if currentPage == index>
                            <li class="disabled"><a href="#">${index}</a></li>
                        <#elseif type == "1">
                            <li><a href="../station/getStation?page=${index}&size=${size}">${index}</a></li>
                        <#elseif type == "2">
                            <li><a href="../station/choose?page=${index}&size=${size}&word=${word}">${index}</a></li>
                        </#if>
                    </#list>
                </#if>
                <#if currentPage gte maxSize>
                    <li class="disabled"><a href="#">下一页</a></li>
                <#elseif type == "1">
                    <li><a href="../station/getStation?page=${currentPage + 1}&size=${size}">下一页</a></li>
                <#elseif type == "2">
                    <li><a href="../station/choose?page=${currentPage + 1}&size=${size}&word=${word}">下一页</a></a></li>
                </#if>
                </ul>
            </ul>
        </div>
        <!--以下是信息修改/新建信息弹出页面-->
        <div class="pos-ab wh-bfb pad-30 bdbox dis-no height100 yaxh" id="pop_info">
            <div class="container w-lim pad-10 ov-h bdbox">
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">场站编号:</div>
                    <div class="span2">
                        <input type="text" min="1" placeholder="输入场站编号" class="num-input"/></div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">场站名称:</div>
                    <div class="span2">
                        <input type="text" placeholder="输入场站名称" class="name-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">所属公司:</div>&nbsp;&nbsp;
                    <#--<div class="span2">
                        <input type="text" placeholder="输入所属公司" class="owner-input"/>
                    </div>-->
                    <select placeholder="点击选择" class="type-input" id="" value="">
                        <#list clients as clients>
                            <option value="${clients.name!""}">${clients.name!""}</option>
                        </#list>
                    </select>
                </div>
            </div>
            <div class="container w-lim pad-10 m-b-10 ov-h bdbox pos-re">
                <h3 class="pos-re">地理位置坐标<span class="yulan  btn bg-color" onclick="clicktd()">预览</span></h3>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点1:</div>
                    <div class="span8">
                        <input type="text" placeholder="经度" class="coords-input pointC margin-t10 width100" id="jin1"/>
                        <input type="text" placeholder="纬度" class="coords-input pointC width100" id="wei1"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点2:</div>
                    <div class="span8">
                        <input type="text" placeholder="经度" class="coords2-input pointC margin-t10 width100" id="jin2"/>
                        <input type="text" placeholder="纬度" class="coords-input pointC width100" id="wei2"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点3:</div>
                    <div class="span8">
                        <input type="text" placeholder="经度" class="coords-input pointC margin-t10 width100" id="jin3"/>
                        <input type="text" placeholder="纬度" class="coords-input pointC width100" id="wei3"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot" id="aim-tag">
                    <div class="span3 text-right offset1">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点4:</div>
                    <div class="span8">
                        <input type="text" placeholder="经度" class="coords2-input pointC margin-t10 width100" id="jin4"/>
                        <input type="text" placeholder="纬度" class="coords-input pointC width100" id="wei4"/>
                    </div>
                </div>
                <span class="add-btn text-center " id="add-btn">十</span>

            </div>
            <div class="w-lim2 pad-10 ov-h bdbox">
                <!--以下按钮组用于修改信息用-->
                <div class="row-fluid p-t-30 dis-no" id="txt_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="updateStation">确定</button>
                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
                <!--以下按钮组用于新建信息用-->
                <div class="row-fluid p-t-30 dis-no" id="new_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="addStation">确定</button>
                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 点击删除按钮时弹出的模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="width:350px;margin-left:-175px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-color">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <p class="modal-title text-center " id="myModalLabel">
                    提示消息
                </p>
            </div>
            <div class="modal-bodyr text-cente">
                是否确认删除?
            </div>
            <div class="modal-footer text-center">
                <button type="button" class="btn bg-color span2" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn bg-color2 span2" id="delete">
                    删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 导入表格的模态框（Modal） -->
<div class="modal fade dis-no" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true" style="width:360px;margin-left:-180px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-color">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <p class="modal-title text-center " id="myModalLabel">
                    选择文件
                </p>
            </div>
            <form id="uploadFormFile" class="from-lj">
                <div class="modal-body text-center p-l-20">
                    <p class="text-left">导入的文件格式为excel表格</p>
                    <p class="text-left"> 请在导入前下载导入模板</p>
                    <div class="row m-t-10 text-left p-l-20">
                        <input type="text" class="m-t-10" placeholder="请输入文件名称" id="fileid"/>
                        <button class="btn btn-mini bg-color text-center pos-re ov-h">浏览<input type="file" class=" pos-ab" name="fileName" id="filePath" />
                        </button>
                    </div>
                    <div class="row m-t-10 text-left p-l-20">
                        <a href="#" style="color:#00F;">点击下载导入模板</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn bg-color span4 " onclick="uploadStation()">
                        导入
                    </button>
                </div>
        </div>
        </form>
    </div>
</div>

<div id="pop-bottom">
</div>

<!--以下是新建信息弹出页面-->
<div class="container ov-h bdbox bg-white p-b-20 pos-re new-count dis-no" id="new-count" >
    <h3 class="text-center tit-top p-r-10 pos-re">地图预览</br>
        <button type="button" class="close fix-close p-t-10 p-l-10" data-dismiss="modal" aria-hidden="true">
            ×
        </button>

    </h3>
    <div class="row-fluid pad-10 bdbox">
        <div id="allmap" style="height: 600px;">
        </div>
    </div>

</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/station.js"></script>
<script src="../static/js/station/NewStation.js"></script>
<script src="../static/js/jquery.pagination.js"></script>
<#--<script>-->
<#--$('.M-box').pagination({-->
<#--pageCount:50,-->
<#--jump:true,-->
<#--coping:true,-->
<#--homePage:'首页',-->
<#--endPage:'末页',-->
<#--callback:function(api){-->
<#--$('.now').text(api.getCurrent());-->
<#--}-->
<#--},function(api){-->
<#--$('.now').text(api.getCurrent());-->
<#--});-->

<#--</script>-->
<script>
    function clicktd() {

        // 百度地图API功能
        var poinArr = new Array();
        var point = new Array();

        var count = 0;

        point[0] = "";
        point[1] = "";
        point[2] = "";
        point[3] = "";
        point[4] = "";
        point[5] = "";
        point[6] = "";
        point[7] = "";

        $(".pointC").each(function(){
//        alert($(this).val());
            point[count] = $(this).val();
            count++;

        });
//    alert(poinArr[0]);
//    alert(poinArr[1]);
//    alert(poinArr[2]);
//    alert(poinArr[3]);

        if(point[2] == "")
        {
            var map = new BMap.Map("allmap");
            var point1 = new BMap.Point(point[0],point[1]);
            map.centerAndZoom(point1, 15);
            map.enableScrollWheelZoom();
            map.addControl(new BMap.ScaleControl());
            var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
            map.addControl(top_right_navigation);

            var circle = new BMap.Circle(point1,300,{strokeColor:"red", strokeWeight:5, strokeOpacity:1}); //创建圆

            map.addOverlay(circle);

            $('#pop-bottom').fadeIn(); //弹出新建信息页面
            $('#new-count').fadeIn();
        }
        else
        {
            var map = new BMap.Map("allmap");
            poinArr[0] = new BMap.Point(point[0],point[1]);
            poinArr[1] = new BMap.Point(point[2],point[3]);
            poinArr[2] = new BMap.Point(point[4],point[5]);
            poinArr[3] = new BMap.Point(point[6],point[7]);

            var point1 = new BMap.Point(point[6], point[7]);
            map.enableScrollWheelZoom();
            // map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            // map.addControl(new BMap.OverviewMapControl({isOpen: true}));
            var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
            map.addControl(top_right_navigation);
            map.centerAndZoom(point1, 30);


            var polygon = new BMap.Polygon([
                poinArr[0],
                poinArr[1],
                poinArr[2],
                poinArr[3]
            ], {strokeColor:"red", strokeWeight:10, strokeOpacity:1});  //创建多边形

            map.addOverlay(polygon);           //增加多边形

            $('#pop-bottom').fadeIn(); //弹出新建信息页面
            $('#new-count').fadeIn();
        }
    }
    $(function () {

        //关闭修改/查看弹窗
        $('#new-count').on('click', '.close', function() {
            $(this).parents('#new-count').hide();
            $('#pop-bottom').css('display', 'none');
        });
        //鉴权
        $('#add_info').click(function () {
            var action = "3_0";

            //鉴权
            $.ajax({
                type: "POST",
                url: "../user/checkPower",
                dataType: 'json',
                data: {
                    "action": action
                },
                success: function (data) {
                    if (data.status != "success") {
                        alert(data.msg);
                        $('#pop_info').css('display', 'none');//弹出新建信息页面
                        $('#pop_info').find('input').val('');//初始化新建信息页面
                        $('#new_add').css('display', 'none');//显示新建信息页面的按钮组
                        $('#txt_add').css('display', 'block');//关闭修改信息页面的按钮组
                        // alert(2222);
                        return false;
                    }
                    else {
                        // alert(1111);
                    }
                }
            });

        });

        $('#import_btn').click(function () {
            var action = "3_0";

            //鉴权
            $.ajax({
                type: "POST",
                url: "../user/checkPower",
                dataType: 'json',
                data: {
                    "action": action
                },
                success: function (data) {
                    if (data.status != "success") {
                        alert(data.msg);
                        window.location.href = "../station/getStation";
                        return false;
                    }
                    else {
                        // alert(1111);
                    }
                }
            });

        });

        $(document).on('click','.update_info',function(){
//            alert(1111);
            var action = "3_2";

            //鉴权
            $.ajax({
                type: "POST",
                url: "../user/checkPower",
                dataType: 'json',
                data: {
                    "action": action
                },
                success: function (data) {
                    if (data.status != "success") {
                        alert(data.msg);
                        $('#pop_info').css('display', 'none');//弹出新建信息页面
                        $('#pop_info').find('input').val('');//初始化新建信息页面
                        $('#new_add').css('display', 'none');//显示新建信息页面的按钮组
                        $('#txt_add').css('display', 'block');//关闭修改信息页面的按钮组
                        // alert(2222);
                        return false;
                    }
                    else {
                        // alert(1111);
                    }
                }
            });

        });

    })
</script>
</body>
</html>

